<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./lib/style.css">
    <title>Poster</title>
</head>
<style>
    #app{
        position: absolute;
        left: 10%;
        right: 10%;
        top: 20%;
        bottom: 30%;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fffa;
        border: #9f5f00 10px solid;
        border-radius: 30px;
        max-width: 40rem;
    }
    #list{
        width: 80%;
        text-align: center;
        flex: 1;
    }
    #list div{
        font-size: 1.5rem;
        margin: 10px;
        background: #b7650075;
        padding: 6px;
        border-radius: 10px;
        cursor: pointer;
    }
    #list div:hover{
        background: #e99d4075;
    }
</style>
<body>
    <div id="app">
        <h1>请选择主办单位</h1>
        <div id="list">
            <div v-for="item in list" @mouseenter="onHoverIn(item)" @mouseleave="onHoverOut" @click="onItemSelect(item)">{{item.name}}</div>
        </div>
        {{selectItem?.detail}}
    </div>
</body>

<script type="module">
    import { createApp, reactive } from './lib/vue3esm.mjs'
    createApp({
        data() {
            return {
                list: [
                    {
                        name: "次元k",
                        url: "poster1.html",
                        detail: "辉县随舞"
                    }, {
                        name: "心音符",
                        url: "poster2.html",
                        detail: "商丘随舞"
                    }, {
                        name: "自定义",
                        url: "poster.html",
                        detail: "自定义随舞"
                    }
                ],
                selectItem: null
            }
        },
        methods:{
            onHoverIn(item) {
                this.selectItem = item;
            },
            onHoverOut() {
                this.selectItem = null;
            },
            onItemSelect(item){
                console.log(item);
                window.location.href = item.url
            }
        }
    }).mount('#app');
</script>

</html>